<template>
  <div class="title">Axios</div>
  <div class="inner">
    <button @click="getInfo">使用get请求</button>
    <button @click="postInfo">使用post请求</button>
    <span>{{ messageStr }}</span>
    <el-table  v-loading="loading" :data="tableData" stripe style="width: 55%">
      <el-table-column prop="id" label="ID" width="200" />
      <el-table-column prop="name" label="Name" width="200" />
      <el-table-column prop="url" label="URL" />
    </el-table>
  </div>
</template>

<script setup>
import {ref,getCurrentInstance} from 'vue';
const {proxy}=getCurrentInstance();
let tableData=ref(''), messageStr=ref('');
const loading = ref('');
//get请求数据
function getInfo(){
 loading.value=true;//加载
 messageStr.value='数据请求中，请稍后...';
 const promiseReq=proxy.$HelperAxios.get('http://localhost:5013/api/Training/demo',{params:{id:1,name:'Tiktok'}})
 promiseReq.then((reResult)=>{
   console.log(reResult);
    if(reResult.status===200){
         if(reResult.data.StatusCode==="Success"){
            loading.value=false;//取消加载
            messageStr.value='数据加载成功';
            tableData.value=reResult.data.JsonArrayCompanies;
         }
         else{
            alert('请求失败')
            loading.value=false;
         }
    }
    else{
        alert('请求网络错误')
        loading.value=false;
    }
 })
 setTimeout(()=>{
    messageStr.value='';
 },6000)
}


//post请求数据
function postInfo(){
    loading.value=true;//加载
    messageStr.value='数据请求中，请稍后...';
   const promiseReq=proxy.$HelperAxios.post('http://localhost:46208/Training/demo',{id:1,name:'Tiktok'})
   promiseReq.then((reResult)=>{
    if(reResult.status===200){
         if(reResult.data.StatusCode==="Success"){
            console.log(reResult);
            loading.value=false;//取消加载
            messageStr.value='数据加载成功';
            tableData.value=reResult.data.JsonArrayCompanies;
         }
         else{
            alert('请求失败,接口异常')
            loading.value=false;
         }
    }
    else{
        alert('请求网络错误')
        loading.value=false;
    }
 })
 setTimeout(()=>{
    messageStr.value='';
 },6000)
}
</script>

<style scoped>
body {
  margin: 0;
}
.example-showcase .el-loading-mask {
  z-index: 9;
}
button{
    display: inline-block;
    margin-right: 20px;
}
</style>